<!DOCTYPE html>
<html lang=''>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='./vue.js'></script>
    <style>
        html,
        body,
        #app {
            height: 100%;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        header {
            text-align: center;
            height: 44px;
            border-bottom: 1px solid gray;
            line-height: 44px;
        }

        footer {
            width: 100%;
            height: 50px;
            border-top: 1px solid gray;
            position: fixed;
            bottom: 0;
            left: 0;
            z-index: 99999999;
        }

        footer span {
            width: 25%;
            float: left;
            text-align: center;
            line-height: 50px;
        }
    </style>
</head>

<body>
    <div id='app'>
        <header>头部</header>


        <!-- 动态组件使用的是一个 component 组件中添加一个 :is 属性，该属性对应的值就是组件的名称 -->
        <!-- 如果直接写 keep-alive 会导致所有组件全部都会被缓存，消耗比较大 -->
        <!-- 我们应该只缓存需要缓存的组件，不需要缓存的组件就不缓存 -->
        <!-- <keep-alive>
            <component :is="com" />
        </keep-alive> -->

        <!-- include 包含，只有包含的组件才会被缓存，其余组件全部都不会被缓存 -->
        <!-- include 对应的值是定义组件是的 name 属性的值 -->

        <!-- <keep-alive :include="['home', 'kind']">
            <component :is="com" />
        </keep-alive> -->

        <!-- exclude 排除，写在排除中的组件将不会被缓存 -->
        <!-- :max="10" 配置最大缓存数量 -->
        <keep-alive :exclude="['home', 'kind']">
            <component :is="com" />
        </keep-alive>

        <footer>
            <span @click="com = 'home'">首页</span>
            <span @click="com = 'kind'">分类</span>
            <span @click="com = 'cart'">购物车</span>
            <span @click="com = 'user'">我的</span>
        </footer>
    </div>
</body>
<script>
    const app = Vue.createApp({
        data () {
            return {
                com: 'home'
            }
        },
    })

    app.component('home', {
        name: 'home',
        template: `<h1>
            首页: <input type='text' />
            </h1>`
    })

    app.component('kind', {
        name: 'kind',
        template: `<h1>
            分类: <input type='text' />
            </h1>`
    })

    app.component('cart', {
        template: `<h1>
            购物车: <input type='text' />
            </h1>`
    })

    app.component('user', {
        template: `<h1>
            用户: <input type='text' />
            </h1>`
    })





    app.mount('#app')
</script>

</html>